<template>
  <div>
    <Button type="primary" @click="showModal">管理重点人群属性</Button>
    <Modal
      @on-visible-change="showChange()"
      width="1200"
      v-model="modal"
      title="重点人群属性">
      <div class="divtitleClass">
        添加人员重点人群标签
      </div>
      <div class="divclass">
        <Select class="topclass" v-model="first_select" style="width:200px" @on-change="findFocusGroupLabelList('2',first_select)">
          <Option v-for="item in firstLableList" :value="item.id" :key="item.id">{{ item.name }}</Option>
        </Select>
        <Select class="topclass" v-model="second_select_str" style="width:200px">
          <Option v-for="item in secondLableList" :value="JSON.stringify(item)" :key="item.id">{{ item.name }}</Option>
        </Select>
        <Button class="topclass" type="success" @click="savePeopleFocusGroup">添加</Button>
        <div style="margin-top: 1%" v-show="second_select_obj.label_name_json">
          <Input :maxlength="item.maxlength" :show-word-limit="item.wordLimit" class="topclass" v-for="(item,index) in label_name_list" :key="index" :type="item.type" v-model="label_name_json[item.model]"  :placeholder="item.label" style="width: 200px"/>
        </div>
      </div>
      <div class="divtitleClass">
        人员现有重点人群标签
      </div>
      <div v-for="item in tableData"  :key="item.id">
        <Table style="margin-top: 1%"  :columns="item.label_info_json" :data="item.tableData">
          <template slot-scope="{ row, index, column }" slot="action">
            <Button :disabled="row.community_update === '1'? true : false" size="small" type="error" @click="deleteInfo(row)">删除</Button>
          </template>
        </Table>
      </div>
      <vxe-table
        style="margin-top: 1%"
        align="center"
        :data="tableData2">
        <vxe-table-column field="first_level_label" title="一级标签"></vxe-table-column>
        <vxe-table-column field="second_level_label" title="二级标签"></vxe-table-column>
        <vxe-table-column width="100" title="操作">
          <template v-slot="{ row }">
            <Button :disabled="row.community_update === '1'? true : false" size="small" type="error" @click="deleteInfo(row)">删除</Button>
          </template>
        </vxe-table-column>
      </vxe-table>
    </Modal>
  </div>
</template>

<script>
import {
  deleteUserFocusGroup,
  findFocusGroupLabelList,
  findUserFocusGroupList,
  savePeopleFocusGroup
} from '../../../../api/eventlist'

export default {
  name: 'focus-group',
  props: {
    userInfo: {
      type: Object
    }
  },
  data () {
    return {
      label_name_list: {},
      label_name_json: {},
      second_select_str: '',
      first_select_str: '',
      second_select_obj: {},
      first_select_obj: {},
      first_select: '',
      second_select: '',
      tableData: [],
      tableData2: [],
      value1: [],
      modal: false,
      firstLableList: [],
      secondLableList: []
    }
  },
  watch: {
    second_select_str (n, o) {
      // console.log(n, o)
      if (n !== null && n !== '' && n !== undefined) {
        let obj = JSON.parse(n)
        this.second_select_obj = obj
        this.second_select = obj.id
        if (obj.label_name_json) {
          this.label_name_list = JSON.parse(obj.label_name_json)
          console.log(this.label_name_list, 'lllllll')
        }
      }
    }
    // first_select_str (n, o) {
    //   // console.log(n, o)
    //   if (n !== null && n !== '' && n !== undefined) {
    //     let obj = JSON.parse(n)
    //     this.first_select_obj = obj
    //     this.first_select = obj.id
    //   }
    // }
  },
  methods: {
    showChange () {
      this.label_name_list = []
      this.second_select_str = ''
      this.first_select = ''
      this.label_name_json = {}
    },
    showModal () {
      this.modal = true
      this.findFocusGroupLabelList('1', '')
      this.findUserFocusGroupList()
    },
    findUserFocusGroupList () {
      let data = {
        cardno: this.userInfo.cardno
      }
      findUserFocusGroupList(data).then(ret => {
        if (ret.data.errcode === 0) {
          let list = []
          let list2 = []
          ret.data.data.forEach(function (temp) {
            if (temp.label_info_json) {
              temp.label_info_json = JSON.parse(temp.label_info_json)
              let data = []
              let obj = {}
              temp.label_info_json.unshift({ 'key': 'second_level_label', 'title': '二级标签', 'second_level_label': temp.second_level_label })
              temp.label_info_json.unshift({ 'key': 'first_level_label', 'title': '一级标签', 'first_level_label': temp.first_level_label })
              // temp.label_info_json.unshift({ 'key': 'second_level_id', 'title': '二级标签', 'second_level_id': temp.second_level_id })
              // temp.label_info_json.unshift({ 'key': 'first_level_id', 'title': '一级标签', 'first_level_id': temp.first_level_id })
              temp.label_info_json.push({ 'slot': 'action', 'title': '操作', 'width': '100', 'align': 'center' })
              temp.label_info_json.forEach(function (item) {
                item.align = 'center'
                obj[item.key] = item[item.key]
              })
              obj.id = temp.id
              obj.community_update = temp.community_update
              obj.first_level_id = temp.first_level_id
              obj.second_level_id = temp.second_level_id
              data.push(obj)
              temp.tableData = data
              list.push(temp)
            } else {
              list2.push(temp)
            }
          })
          console.log(list, 'ppppp')
          this.tableData2 = list2
          this.tableData = list

          // this.tableData2.forEach(item => {
          //   if (item.second_level_id === 'L1111-1699668260526') {
          //     this.first_select = 'L1111'
          //     this.findFocusGroupLabelList('2', this.first_select)
          //   }
          //   if (item.second_level_id === 'L2222-1699668419369') {
          //     this.first_select = 'L2222'
          //     this.findFocusGroupLabelList('2', this.first_select)
          //   }
          // })
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
        }
      })
    },
    findFocusGroupLabelList (e1, e2) {
      let data = {
        grade: e1,
        id: e2
      }
      findFocusGroupLabelList(data).then(ret => {
        if (ret.data.errcode === 0) {
          if (e1 === '1') {
            // list.forEach(function (temp) {
            //   if (temp.community_update === '0') {
            //     that.firstLableList.push(temp)
            //   }
            // })
            this.firstLableList = ret.data.data
          } else if (e1 === '2') {
            // let list = ret.data.data
            // let that = this
            // this.secondLableList = []
            // list.forEach(function (temp) {
            //   if (temp.community_update === '0') {
            //     that.secondLableList.push(temp)
            //   }
            // })
            this.secondLableList = ret.data.data
          }
          this.label_name_list = []
          this.label_name_json = {}
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
        }
      })
    },
    deleteInfo (e) {
      console.log('e', e)
      let data = {
        id: e.id,
        second_level_id: e.second_level_id
      }
      deleteUserFocusGroup(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({ title: '删除成功！', desc: ret.data.errmsg })
          this.findUserFocusGroupList()
        } else {
          this.$Notice.error({ title: '删除失败！', desc: ret.data.errmsg })
        }
      })
    },
    savePeopleFocusGroup () {
      let data = {
        cardno: this.userInfo.cardno,
        name: this.userInfo.name,
        first_level_id: this.first_select,
        second_level_id: this.second_select
      }
      if (this.label_name_list.length > 0) {
        let that = this
        let list = []
        let state = false
        this.label_name_list.forEach(function (temp) {
          if (temp.required) {
            if (!that.label_name_json[temp.model]) {
              that.$Notice.error({ title: '保存失败！', desc: '请填写' + temp.label })
              state = true
            }
          }
          let obj = {}
          obj.title = temp.label
          obj.key = temp.model
          obj[temp.model] = that.label_name_json[temp.model]
          list.push(obj)
        })
        if (state) {
          return
        }
        // list.push({ 'key': 'first_level_label', 'title': '一级标签', 'first_level_label': this.first_select_obj.name })
        // list.push({ 'key': 'second_level_label', 'title': '二级标签', 'second_level_label': this.second_select_obj.name })
        data.label_info_json = JSON.stringify(list)
      }
      savePeopleFocusGroup(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({ title: '保存成功！', desc: ret.data.errmsg })
          this.findUserFocusGroupList()
          this.first_select = ''
          this.second_select = ''
          this.second_select_str = ''
          this.label_name_list = []
        } else {
          this.$Notice.error({ title: '保存失败！', desc: ret.data.errmsg })
        }
      })
    }
  }
}
</script>

<style scoped>
.selectCss{
  display: flex;
  margin-bottom: 10px;
}
.divclass{
  margin-bottom: 10px;
}
.divtitleClass{
  background-color: rgb(236, 248, 255);
  border-left: 5px solid rgb(80, 191, 255);
  border-radius: 4px;
  font-size: 16px;
  margin: 15px 0px;
  padding: 8px 12px;
  width: 100%;
}
.topclass{
  margin-right: 5px;
}
</style>
